<!DOCTYPE html>
<html lang="zh_CN">   <!-- 表示html文件的开始  lang表示语言 -->
<!--头部信息包含title标签，css样式，js代码-->
<head>
    <meta charset="UTF-8"> <!--当前页面使用utf-8字符集-->
    <title>Title</title> <!--显示在浏览器标题栏的内容-->
</head>
<!--页面主体-->
<!--
bgcolor 设置背景颜色
onclick 添加弹出框
<hr/> 单标签，水平分割符
<br/> 换行
-->
<body bgcolor="#7fffd4">
<!--修改字体-->
<font color="red" face="宋体" size="4">你好</font>
<hr/>
你好<br/>世界
<button onclick="alert('出现异常')"></button>
<!--特殊字符
&lt; 表示 <
&gt; 表示 >
&nbsp; 表示 空格
-->
&lt;&nbsp;&gt;
<!--标题标签-->
<h1 align="left">标题1</h1>  <!--左对齐-->
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题7</h7>   <!--无效-->
<!--超链接-->
<br>
<a href="http://www.baidu.com/" target="_self">百度</a>   <!--在当前页面-->
<a href="http://www.baidu.com/" target="_blank">百度</a>  <!--打开新页面-->
<!--列表标签-->
<!--有序列表-->
<ol>
    <li>刘德华</li>
    <li>张学友</li>
    <li>郭富城</li>
    <li>黎明</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>刘德华</li>
    <li>张学友</li>
    <li>郭富城</li>
    <li>黎明</li>
</ul>
<!--图片-->
<img src="./light.jpg" width="300" height="400" border="10" alt="抛异常"/>
<!--表格
table 表格标签
tr 行标签
th 表头标签
td 单元格标签
-->
<table border="1" width="300" height="300" align="center" cellpadding="0">
    <tr>
        <td align="center"><b>[1, 1]</b></td>
        <th>[1, 2]</th>
        <th>[1, 3]</th>
    </tr>
    <tr>
        <th>[2, 1]</th>
        <th>[2, 2]</th>
        <th>[2, 3]</th>
    </tr>
</table>

<table width="300" height="300" border="1" cellpadding="0">
    <tr>
        <!--        占两列，和隔壁列合并了-->
        <th colspan="2">[1, 1]</th>
        <th>[1, 3]</th>
        <th>[1, 4]</th>
        <th>[1, 5]</th>
    </tr>
    <tr>
        <!--        占两行，把隔壁行占了-->
        <th rowspan="2">[2, 1]</th>
        <th>[2, 2]</th>
        <th>[2, 3]</th>
        <th>[2, 4]</th>
        <th>[2, 5]</th>
    </tr>
    <tr>
        <th>[3, 2]</th>
        <th>[3, 3]</th>
        <th>[3, 4]</th>
        <th>[3, 5]</th>
    </tr>
    <tr>
        <!--        占两行两列 直接把四个格子都占了-->
        <th colspan="2" rowspan="2">[4, 1]</th>
        <th>[4, 3]</th>
        <th>[4, 4]</th>
        <th>[4, 5]</th>
    </tr>
    <tr>
        <th>[5, 3]</th>
        <th>[5, 4]</th>
        <th>[5, 5]</th>
    </tr>

</table>
<!--显示子页面-->
<iframe src="iframe.html" width="300" height="300" name="abc"></iframe>
<!--实现在子页面上，跳转不同的超链接-->
<ul>
    <li><a href="1.html" target="abc"> 标签0 </a></li>
    <li><a href="2.html" target="abc"> 标签1 </a></li>
    <li><a href="iframe.html" target="abc"> 标签2 </a></li>

</ul>
<!--文本封装标签-->
<div>默认独占一行</div>
<span>长度就是封装长度,不空行</span>
<p>段落标签,在段落前后均空一行出来</p>


</body>
</html>














